<template>
    <view class="c-tabbar  flex-row bg-ff">
        <view class="tabbar-item text-center" :style="{'width':100/list.length+'%'}" v-for="(item,index) in list"
            :key="index" @click="toUrl(item)">
            <image :src="item.imageUrl" style="width: 50rpx;height: 50rpx;" mode=""></image>
            <view class="text line-height-40">{{item.name}}</view>
        </view>

    </view>
</template>

<script>
    export default {
        props: {
            list: {
                type: Array,
                required: true
            },
            type_id: Number,
            active: Boolean,
            name: {
                type: String,
                default: 'name'
            },

        },

        data() {
            return {}
        },
        methods: {
            toUrl(item) {
                switch (item.id) {
                    case 0:
                        this.$emit('onPay')
                        break;
                    case 1:
                        this.$emit('onCancel')
                        break;
                    case 2:
                        this.$emit('onComment')
                        break;
                    case 3:
                        this.$emit('onEdit')
                        break;
                    case 4:
                        this.$emit('onRefund')
                        break;
                    case 5:
                        this.$emit('onRider')
                        break;
                    case 6:
                        this.$emit('onPlan')
                        break;
                    case 7:
                        this.$emit('onShop')
                        break;
                    default:
                        break;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .c-tabbar {
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;

        .tabbar-item {
            padding: 20rpx 0;

        }

        .active {
            position: absolute;
            left: 50%;
            top: 25%;
            width: 4rpx;
            height: 60rpx;
            background-color: #c6c4c4;
        }

        .text {
            color: $color-theme;
        }
    }
</style>
